<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!--
        标签：
            table: 表格标签
                tr: 行标签
                th: 表头单元格内容
                td: 内容单元格
        属性：
            border: 添加边框线
    -->
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>

    <!-- 表格结构标签：
                thead: 表格头部，表格头部内容说明
                tbody: 表格主体，主要内容区域
                tfoot: 表格底部，汇总信息区域
             作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
        合并单元格：
            1. 明确合并的目标
            2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
               跨行合并，保留最上单元格，添加属性 rowspan
               跨列合并，保留最左单元格，添加属性 colspan
            3. 删除其他单元格
     -->
    <table border="1">
        <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td rowspan="2">100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <!-- <td>100</td> -->
            <td>198</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>总结</td>
            <td colspan="3">全市第一</td>
            <!-- <td>全市第一</td>
            <td>全市第一</td> -->
        </tr>
        </tfoot>
    </table>
</body>
</html>